<template>
	<view class="con">
		<view class="box" style="padding: 12rpx 30rpx">
			<view class="box_left">头像</view>

			<button
				class="box_right"
				style="justify-content: flex-end"
				open-type="chooseAvatar"
				@chooseavatar="onChooseAvatar">
				<image class="box_right_img" src="/static/77.png" mode="" v-if="!avatarUrl"></image>
				<image class="box_right_img" :src="avatarUrl" mode="" v-else></image>
				<image class="box_right_img_zw" src="/static/28.png" mode=""></image>
			</button>
		</view>
		<view class="box">
			<view class="box_left">姓名</view>
			<view class="box_right">{{ wode.name }}</view>
		</view>
		<view class="box">
			<view class="box_left">身份证号</view>
			<view class="box_right">{{ wode.idcphotoard }}</view>
		</view>
		<view class="box">
			<view class="box_left">联系电话</view>
			<view class="box_right">
				<input type="text" v-model="phone" style="text-align: right" />
				<span class="span">可修改</span>
			</view>
		</view>

		<view class="rules">
			<view class="rules_title">
				<view class="rules_title_zw"></view>
				入驻规则
			</view>
			<view class="rules_text">
				<rich-text :nodes="nodes_data(zulinguize)"></rich-text>
			</view>
		</view>
		<view class="rules">
			<view class="rules_title">
				<view class="rules_title_zw"></view>
				房源租赁规则
			</view>
			<view class="rules_text">
				<rich-text :nodes="nodes_data(fangdongruzhuguize)"></rich-text>
			</view>
		</view>
		<button class="box" open-type="contact">
			<view class="box_left">平台客服</view>
			<view class="box_right">
				<span class="span">去联系</span>
				<image class="box_right_img_zw" src="/static/28.png" mode=""></image>
			</view>
		</button>
	</view>
	<view class="btn">
		<view class="btn_nr" @click="submit">确定修改并保存</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let page = ref(1)
	let phone = ref('')
	let avatarUrl = ref('')
	let wode = ref({})

	let zulinguize = ref('')
	let fangdongruzhuguize = ref('')
	const onChooseAvatar = (file) => {
		console.log('file', file)
		http.upload(file.detail.avatarUrl).then((res) => {
			console.log('res', res)
			avatarUrl.value = res.file_path
		})
	}
	const submit = async () => {
		http.post('/srapi/keyuan/bjtj', { photo: avatarUrl.value, phone: phone.value }).then((res) => {
			console.log('返回值', res)

			uni.showToast({
				mask: true,
				title: res.msg,
				icon: 'none',
				duration: 500
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		http.post('/srapi/keyuan/wode').then((res) => {
			console.log('房东', res)
			wode.value = res.data
			phone.value = res.data.lxphone
			avatarUrl.value = res.data.photo
		})
		http.noAuthpost('/srapi/wode/xieyi').then((res) => {
			console.log('协议', res.data)
			zulinguize.value = res.data.zulinguize
			fangdongruzhuguize.value = res.data.fangdongruzhuguize
		})
	})
	const nodes_data = (value) => {
		let finalHtml = processRichText(value)
		return finalHtml
	}
	// 处理富文本中的图片样式
	const processRichText = (html) => {
		// 1. 移除原img标签中的style和内联宽高
		let processedHtml = html
			.replace(/<img([^>]*)style="[^"]*"/g, '<img$1') // 移除原有style
			.replace(/<img([^>]*)width="[^"]*"/g, '<img$1') // 移除width属性
			.replace(/<img([^>]*)height="[^"]*"/g, '<img$1') // 移除height属性

		// 2. 为所有img标签添加自适应样式
		processedHtml = processedHtml.replace(
			/<img([^>]*)>/g,
			'<img$1 style="max-width:100%; height:auto; display:block; margin:0 auto;">'
		)

		return processedHtml
	}
</script>

<style lang="less" scoped>
	.con {
		padding: 30rpx;
		.title {
			font-size: 32rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 30rpx;
		}
	}

	.box {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
		.box_left {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
		}

		.box_right {
			display: flex;
			align-items: center;
			text-align: left;
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
			.span {
				font-size: 28rpx;
				font-weight: 500;
				color: #3475f3;
				margin-left: 10rpx;
			}
			.box_right_img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
			.box_right_img_zw {
				width: 9rpx;
				height: 16rpx;
				margin-left: 25rpx;
			}
		}
	}

	.rules {
		margin-bottom: 18rpx;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		.rules_title {
			font-size: 28rpx;
			font-weight: 700;
			color: #000000;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.rules_title_zw {
				width: 8rpx;
				height: 28rpx;
				background: #007bee;
				border-radius: 4rpx;
				margin-right: 28rpx;
			}
		}
		.rules_text {
			padding-left: 36rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #787878;
			line-height: 36rpx;
		}
	}

	.btn {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		border-radius: 12rpx;
		padding: 15rpx 30rpx;
		padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
		.btn_nr {
			width: 690rpx;
			height: 84rpx;
			background: #209ce4;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 84rpx;
		}
	}
	//
</style>
